/*
 * @Author: viivLgr 
 * @Date: 2018-05-03 14:37:35 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-05-24 14:53:44
 */
import React from 'react';
import ReactDOM from 'react-dom';

class Component extends React.Component {
  // 构造函数
  constructor(props){
    super(props);
    this.state = {
      data: 'old state'
    }
    console.log('这里是初始化数据', 'constructor');
  }
  // 组件将要加载
  componentWillMount(){
    console.log('组件将要加载，componentWillMount');
  }
  // 组件加载完成
  componentDidMount(){
    console.log('组件加载完成，componentDidMount');
  }
  // 将要接收父组件传来的props
  componentWillReceiveProps(){
    console.log('将要接收父组件传来的props，componentWillReceiveProps')
  }
  // 子组件是不是应该更新
  shouldComponentUpdate(){
    console.log('子组件是不是应该更新，shouldComponentUpdate')
    return true;
  }
  // 组件将要更新
  componentWillUpdate(){
    console.log('组件将要更新，componentWillUpdate')
  }
  // 组件更新完成
  componentDidUpdate(){
    console.log('组件更新完成，componentDidUpdate')
  }
  // 组件将要销毁
  componentWillUnmount() {
    console.log('组件将要销毁，componentWillUnmount')
  }


  // 处理点击事件
  handleClick(){
    console.log('这里是更新数据')
    this.setState({
      data: 'new state'
    })
  }
  // 渲染
  render() {
    console.log('render')
    return (
      <div>
        <h1>state: {this.state.data}</h1>
        <h1>props: {this.props.data}</h1>
        <button onClick={(e)=>{this.handleClick(e)}}>更新组件</button>
      </div>
    );
  }
}

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: 'old props',
      hasChild: true
    }
    console.log('初始化数据', 'constructor');
  }
  onPropsChange() {
    console.log('这里是更新props')
    this.setState({
      data: 'new props'
    })
  }
  onDistoryChild(){
    console.log('干掉/添加子组件')
    this.setState({
      hasChild: !this.state.hasChild
    })
  }
  render() {
    return (
      <div>
        {
          this.state.hasChild ? <Component data={this.state.data}/> : null
        }
        <button onClick={(e) => {this.onPropsChange()}}>改变props</button>
        <button onClick={(e) => {this.onDistoryChild()}}>干掉子组件</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);